// 草稿箱
import React from 'react';
import { connect } from 'react-redux';
import { Button, Col, Input, Popconfirm, Row, Space, Table, Tooltip, message } from 'antd';
import styles from './index.module.scss';
import { SearchOutlined } from '@ant-design/icons';
import BdhButton from 'src/pages/Components/BdhButton';
import { getAnalysePageDrafts, batchDelAnalysePage } from 'src/services/AnalyseManage';
import { RouteComponentProps } from 'react-router';
import { encryptParam } from 'src/libs/paramsEncrypt';

interface listItemType {
	name: string;
	id: string;
	effect: string;
}

interface IProps {
	record: listItemType;
	handleEdit: ( item: listItemType ) => void;
	handleDelete: ( item: listItemType ) => void;
	btnAuth: any;
}

//	操作栏组件
const OperateComponent = React.memo( ( props: IProps ) => {
	return props.btnAuth.includes( 'bi_drafts_action' ) ? (
		<Space size="middle">
			<Tooltip placement="topRight" title="编辑">
				<Button
					type="text" icon={ <span className={ `iconfont bdhxiugai ${ styles.greenBtn }` }></span> }
					onClick={ () => props.handleEdit( props.record ) }></Button>
			</Tooltip>

			<Tooltip placement="topRight" title="删除">
				<Popconfirm
					okText="确定" cancelText="取消" title="确定删除这一项？" placement="bottom"
					onConfirm={ () => props.handleDelete( props.record ) }>
					<Button type="text" icon={ <span className={ `iconfont bdhshanchu ${ styles.greenBtn }` }></span> }></Button>
				</Popconfirm>
			</Tooltip>
		</Space>
	) : (
		<Space size="middle"></Space>
	);
} );
OperateComponent.displayName = 'OperateComponent';

class Drafts extends React.PureComponent<RouteComponentProps & { btnAuth:any }> {
	//	声明当前页面变量
	state = {
		pageSize: 10,
		page: 1,
		dataList: [],
		total: 0,
		tableLoading: false,
		keyword: '',
		timer: null,
		selectedRowKeys: []
	};

	//	列表表头配置
	columns = [
		{
			title: '编码',
			dataIndex: 'code'
		},
		{
			title: '名称',
			dataIndex: 'name',
			render: ( text, record ) => {
				return (
					<span className="bdh-link" onClick={() => this.handleEdit( record ) }>{text}</span>
				);
			}
		},
		{
			title: '描述',
			dataIndex: 'des'
		},
		// {
		// 	title: '刷新类型',
		// 	dataIndex: 'initType'
		// },
		{
			title: '所属人员',
			dataIndex: 'createUser'
		},
		{
			title: '修改时间',
			dataIndex: 'modifiedDate'
		},
		{
			title: '操作',
			key: 'action',
			// eslint-disable-next-line react/display-name
			render: ( record: listItemType ) => (
				<OperateComponent
					record={ record }
					handleEdit={ this.handleEdit }
					handleDelete={ this.handleDelete }
					btnAuth={ this.props.btnAuth }
				></OperateComponent>
			)

		},
	];

	//	编辑
	handleEdit = ( item: listItemType ) => {
		let path = `/analyseManage/editReport/${encryptParam( item.id )}/${encryptParam( 'true' )}/${encryptParam( 'EDIT' )}`;
		window.open( path, '_blank' );
	};

	//	删除
	handleDelete = async ( item: listItemType ) => {
		const info = await batchDelAnalysePage( {
			type: 'EDIT',
			ids: [ item.id ], // this.state.selectedRowKeys,
		} );
		// const info = await delAnalysePage( item.id );
		if ( info.data && info.data.success ) {
			message.success( '删除成功' );
			this.getList();
		}

	};

	handleSearchInput = ( e ) => {
		e.persist();

		let value = e.target.value;
		console.log( e.target.value );
		this.setState( {
			keyword: value
		} );

		if ( this.state.timer ) clearTimeout( this.state.timer );
		let timer = setTimeout( () => {
			this.getList();
		}, 300 );
		this.setState( {
			timer: timer
		} );

	};

	//	切换页码
	handlePageChange = ( pageNumber: number ) => {
		this.setState(
			{
				page: pageNumber,
			},
			() => {
				this.getList();
			}
		);
	};

	//	修改每页数量
	setPageSize = ( size: number ) => {
		this.setState( {
			pageSize: size
		} );
	};

	getList = async () => {
		this.setState( {
			tableLoading: true
		} );
		const info = await getAnalysePageDrafts( {
			page: this.state.page,
			size: this.state.pageSize,
			name: this.state.keyword,
		} );
		if ( info.data.success ) {
			this.setState( {
				dataList: info.data.data.rows,
				total: info.data.data.total
			} );
		}
		this.setState( {
			tableLoading: false
		} );
	};

	handleSelectionChange = ( selectedRowKeys ) => {
		this.setState( { selectedRowKeys } );
	};

	//	批量删除
	handleBatchDel = async () => {
		let response = await batchDelAnalysePage( {
			ids: this.state.selectedRowKeys,
			type: 'EDIT'
		} );
		if ( response.data && response.data.success ) {
			message.success( '删除成功' );
			this.getList();
			this.setState( {
				selectedRowKeys: []
			} );
		}
	};

	async componentDidMount() {
		//	发请求获取列表
		this.getList();

	}

	render() {
		const btnAuth = this.props.btnAuth;

		return (
			<div className={ styles.page }>
				<Row justify="space-between">

					<Col span={ 12 } style={ { textAlign: 'left' } }>
						{
							btnAuth.includes( 'bi_drafts_batchDel' ) && (
								<Popconfirm
									okText="确定" cancelText="取消" title="确定删除选中数据？" placement="bottom"
									onConfirm={ this.handleBatchDel }>
									<BdhButton
										authName='bi_drafts_batchDel'
										align='horizontal'
										label='批量删除' className="grey-transpanent"
										onClick={ null }
										icon={ <span className={ `iconfont bdhshanchu ${ styles.batch_del }` }></span> }></BdhButton>
								</Popconfirm>
							)
						}
					</Col>
					<Col xs={ 24 } sm={ 6 } md={ 6 } lg={ 6 } xl={ 6 } style={ { textAlign: 'right' } }>
						<Input
							placeholder="请输入名称回车搜索"
							allowClear
							onChange={ this.handleSearchInput }
							prefix={ <SearchOutlined/> }
						/>
					</Col>
				</Row>

				<div className={ styles.line }></div>

				<Table
					loading={ this.state.tableLoading }
					rowSelection={ { type: 'checkbox', onChange: this.handleSelectionChange } }
					scroll={ { x: '100%' } }
					tableLayout='fixed'
					columns={ this.columns }
					dataSource={ this.state.dataList }
					className={ styles.tableMargin }
					bordered={ true }
					rowKey={ ( row: listItemType ) => row.id }
					size='middle'
					pagination={ {
						showSizeChanger: true,
						pageSize: this.state.pageSize,
						total: this.state.total,
						onChange: this.handlePageChange,
						onShowSizeChange: ( current, size ) => this.setPageSize( size ),
						showTotal: total => `共 ${ total } 条`,
					} }
				/>
			</div>
		);
	}
}

//	映射state到当前组件
const mapStateToProps = ( state ) => {
	return {
		btnAuth: state.btnAuth,
	};
};

export default connect( mapStateToProps )( Drafts );
